import * as echarts from "echarts";
import "echarts-wordcloud";

class WordCloud {
    option = {}

    /*
    @param {String} domId //图表绑定的HTMl元素ID
    @param {String} data //图表要展示的数据
    @param {String} clickfn//点击图表上的文字触发的动作
    */

    init(domId, data, clickfn) {
        this.initOption(data)
        let dom = document.getElementById(domId); //DOM
        var chart = echarts.init(dom);
        chart.on("click", clickfn);
        chart.setOption(this.option);
        return chart;
    }

    /*
    初始化词云图的配置
    @
    */

    initOption(data) {
        this.option = {
            series: [{
                type: "wordCloud",
                gridSize: 10, //单词间距，单位px
                sizeRange: [12, 50], //单词的大小范围，单位px
                rotationRange: [-90, 90], //单词的旋转范围
                shape: "pentagon",
                // 设置为 true 以允许在画布之外部分绘制单词。
                // false不允许绘制大于画布大小的单词
                drawOutOfBound: false,
                // 执行布局动画。
                // 注意：禁用它会导致当有很多单词时 UI 阻塞。
                layoutAnimation: true,
                //全局单词颜色设置
                textStyle: {
                    color: function() {
                        return (
                            "rgb(" + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                            ].join(",") +
                            ")"
                        );
                    },
                },
                //鼠标选择单词时，单词的样式设置（全局设置）
                emphasis: {
                    textStyle: {
                        color: "red",
                    }
                },
                data: data
            }, ]
        }
    }


}

export default WordCloud;